<template>
	<view>
		<view class="top">
			<view>
				<image :src="imgSrc"></image>
				<text @click="login" style="font-size: 35rpx;">{{user.username|| '注册/登录'}}</text>
			</view>
		</view>
		<view class="content">
			<view @click="toMyPost">
				<image src="/static/images/post.png"></image>
				<text>我的帖子</text>
			</view>
			<view @click="toMyAnswer">
				<image src="/static/images/answer.png"></image>
				<text>我的回答</text>
			</view>
		</view>
		<u-cell size="large" icon="account" title="个人资料" :isLink="true" arrow-direction="right"
			@click="toPersonalData"></u-cell>
		<u-cell size="large" icon="kefu-ermai" title="联系客服" :isLink="true" arrow-direction="right"
			@click="toConnect"></u-cell>
		<u-cell size="large" icon="info-circle" title="关于我们" :isLink="true" arrow-direction="right"
			@click="toAbout"></u-cell>
		<u-cell size="large" icon="setting" title="设置" :isLink="true" arrow-direction="right" @click="toSet"></u-cell>
		<u-cell size="large" icon="question" title="问题反馈" :isLink="true" arrow-direction="right"></u-cell>
		<u-popup :show="connectStatus" mode="bottom" @close="closeConnect" closeable>
			<view style="height: 100rpx;text-align: center;line-height: 100rpx;">
				<u-text text="QQ：1989866756" size="30rpx" type="primary" align="center"></u-text>
			</view>
		</u-popup>
		<u-popup :show="aboutStatus" mode="bottom" @close="closeAbout" closeable>
			<view style="height: 100rpx;text-align: center;line-height: 100rpx;">
				<u-text text="版本号: 1.0.0(测试阶段) 惠校连" size="30rpx" type="primary" align="center"></u-text>
			</view>
		</u-popup>
		<!-- 提示去登录 -->
		<u-modal :show="loginShow" @confirm="toLogin" @cancel="closeLoginShow" content="您还没有登录" showCancelButton
			confirmText="去登录"></u-modal>
		<!-- 功能尚未开放的提示 -->
		<u-modal :show="unopenShow" content="该功能尚未开放" @confirm=" closeUnopenShow"></u-modal>
	</view>

</template>

<script setup>
	import {
		ref,
	} from "vue"
	import {
		onShow,
	} from "@dcloudio/uni-app";
	const user = ref({})
	//点击登录
	function login() {
		if (user.value.username == "") {
			uni.navigateTo({
				url: "/pages/login/login"
			})
		}
	}
	//联系我们弹出层
	const connectStatus = ref(false);

	function toConnect() {
		connectStatus.value = true;
	}

	function closeConnect() {
		connectStatus.value = false;
	}
	//关于我们弹出层
	const aboutStatus = ref(false);

	function toAbout() {
		aboutStatus.value = true;
	}

	function closeAbout() {
		aboutStatus.value = false;
	}
	//user页面头像显示
	const imgSrc = ref("/static/images/logo.jpg")
	//修改个人资料
	function toPersonalData() {
		if (user.value.username == "") {
			loginShow.value = true;
		} else {
			uni.navigateTo({
				url: "/pages/personalData/personalData"
			})
		}
	}

	function toMyAnswer() {
		unopenShow.value = true;
	}

	function toMyPost() {
		if (user.value.username == "") {
			loginShow.value = true;
		} else {
			uni.navigateTo({
				url: "/pages/myPost/myPost"
			})
		}
	}
	//点击设置
	function toSet() {
		uni.navigateTo({
			url: "/pages/set/set"
		})
	}
	// 登录提示
	const loginShow = ref(false);

	function toLogin() {
		loginShow.value = false;
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}

	function closeLoginShow() {
		loginShow.value = false;
	}
	onShow(() => {
		if (uni.getStorageSync("user") != null && uni.getStorageSync("user") != "") {
			user.value = JSON.parse(uni.getStorageSync("user"))
			imgSrc.value = user.value.headImg
		} else {
			user.value.username = ""
			imgSrc.value = "/static/images/logo.jpg"
		}

	})
	// 提示该功能尚未开放
	const unopenShow = ref(false);

	function closeUnopenShow() {
		unopenShow.value = false;
	}
</script>

<style lang="scss">
	.top {
		width: 100%;
		height: 375rpx;

		position: relative;

		view {
			width: 300rpx;
			height: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -100rpx;
			margin-left: -150rpx;

			image {
				margin-bottom: 10rpx;
				width: 250rpx;
				height: 250rpx;
				border-radius: 200rpx;
			}
		}
	}

	.content {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin: 50rpx auto;


		view {
			display: flex;
			flex-direction: column;
			align-items: center;

			width: 43%;
			height: 150rpx;
			text-align: center;

			image {
				margin-top: 15rpx;
				width: 80rpx;
				height: 80rpx;
			}

			text {
				margin-top: 10rpx;
			}

			font-size: 30rpx;
			font-weight: 600;
		}
	}
</style>